<script lang="ts" setup>
import { useScrollLock } from '@peng_kai/kit/libs/vueuse';
import { CloseBtn } from '~comp/card';
import { usePollingNotifications } from '~comp-b/notify';
import ProfileInfo from './ProfileInfo.vue';
import ProfileMenu from './ProfileMenu.vue';

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const visible = ref(false);
const bp = useAppBreakpoints();
const isLocked = useScrollLock(document.documentElement);

usePollingNotifications();

watch(() => visible.value && bp.ltMobile, (value) => {
  isLocked.value = value;
}, { immediate: true });

function getPopupContainer(el: HTMLElement) {
  return (bp.ltMobile ? document.body : el?.parentElement) as HTMLElement;
}
</script>

<template>
  <div :key="String(bp.ltMobile)" class="relative">
    <APopover
      v-model:open="visible"
      overlayClassName="ant-cover__Popover-user"
      placement="bottomRight" :arrow="false" trigger="click"
      :getPopupContainer="getPopupContainer" transitionName="none"
    >
      <div class="h-9 flex-center cursor-pointer gap-1 rounded-lg bg-sys-layer-e px-2">
        <TAvatar class="w-6.5 cursor-pointer" :avatar="userInfo?.avatar" />
        <i class="i-ion:ios-arrow-down" />
      </div>
      <template #content>
        <div class="grid mb-1 gap-3">
          <CloseBtn class="ml-auto mobile:hidden" @click="visible = false" />
          <ProfileInfo @close="visible = false" />
          <ProfileMenu @close="visible = false" />
        </div>
      </template>
    </APopover>
  </div>
</template>

<style lang="scss">
.ant-popover.ant-cover__Popover-user {
  padding-top: 14px;

  @media bp-mobile {
    width: 288px;

    .ant-popover-inner {
      max-height: 75vh;
      overflow: auto;
    }
  }

  @media bp-lt-mobile {
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    padding: 0;
    width: 100vw;
    height: var(--dfvh);

    .ant-popover-content,
    .ant-popover-inner {
      height: 100%;
      width: 100%;
      border-radius: 0;
      overflow: auto;
    }
  }
}
</style>
